<template>
	<view class="box">
		<u-navbar :autoBack="true" :bgColor="bgColor" class="transparent-navbar">
			<view slot="left">
				<u-icon name="arrow-left" @click="onLeftClick" :size="20"  />
			</view>
			<view slot="right">
				<u-icon name="server-fill" @click="onRightClick" :size="20"/>
			</view>
		</u-navbar>

		<view class="page-body">
			<view class="page-section page-section-gap full-screen">
				<map :latitude="latitude" :longitude="longitude" :markers="markers" class="map">
				</map>
			</view>
			<!-- 覆盖在地图上的卡片 -->
			<cover-view class="card">
				<!-- 卡片内容 -->
				<cover-view class="card-content">
					<text class="t1">车管家·行程记录</text>
					<view class="card-content-box">
						<u-steps class="steps" current="1" activeIcon="checkmark" inactiveIcon="arrow-right"
							direction="column">
							<u-steps-item title="春暖花园" desc="全程3.8公里 | 10分钟">
								<template #activeIcon>
									<i class="fa fa-checkmark custom-active-icon"></i>
								</template>
								<template #inactiveIcon>
									<i class="fa fa-arrow-right custom-inactive-icon"></i>
								</template>
							</u-steps-item>
							<u-steps-item title="时代新都汇"></u-steps-item>
						</u-steps>
						<cover-view class="c2">
							<image src="../../static/image/u561.png" mode="aspectFit"
								></image>
							<text class="text-on-image" @click="over()">结束行程</text>
						</cover-view>
					</view>
				</cover-view>
			</cover-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgColor: 'transparent', // 设置背景颜色为透明
				latitude: 0, // 初始化纬度为0
				longitude: 0, // 初始化经度为0
				markers: [] // 初始化标记数组
			};
		},
		onLoad() {
			this.getLocation();
		},
		methods: {
			over(){
				console.log("结束行程")
			},
			onLeftClick() {
				// 左侧图标的点击事件
				console.log('左侧图标点击');
			},
			onRightClick() {
				// 右侧图标的点击事件
				uni.navigateTo({
					url:"/pages/gtb/gtb"
				})
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02', // 返回的经纬度坐标类型
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						// 添加当前位置标记
						this.markers.push({
							id: 0,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '/path/to/your/marker-icon.png', // 标记的图标路径
							width: 32, // 标记的宽度
							height: 32 // 标记的高度
						});
					},
					fail: (err) => {
						console.error('获取位置失败', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	
	
	.u-tabbar-item {
		color: red;
		/* 白色 */
	}
	// 导航栏样式
	.transparent-navbar {
		background-color: transparent !important; // 确保背景颜色透明
		 height: 60px; 
		 
	}

	.page-body {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 设置为视口高度 */
		width: 100vw;
		/* 设置为视口宽度 */
		margin: 0;
		/* 去掉默认边距 */
		padding: 0;
		/* 去掉默认内边距 */
	}

	.page-section {
		flex: 1;
		/* 使其占满剩余空间 */
	}

	.full-screen {
		position: relative;
		overflow: hidden;
		/* 隐藏溢出部分 */
	}

	.map {

		width: 100%;
		/* 设置宽度为100% */
		height: 100%;
		/* 设置高度为100% */
	}

	.card {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 200px;
		width: 100vw;
		background-color: white;
		border-radius: 10px 10px 0 0;
		box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
	}

	.card-content {
		padding: 10px;
		.t1{
			font-size: 20px;
			color: rgb(58, 202, 170);
			margin-left: 10px;
			font-weight: bold;
		}
	}

	.card-content-box {
		width: 352;
		height: 108px;
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		border-radius: 20px;
		background-image: linear-gradient(to right, rgb(212, 248, 238), rgb(249, 255, 253));
		margin-top: 30px;

		.steps {
			margin-left: 20px;
			margin-top: 10px;
			line-height: 100%;
		}

		.custom-active-icon {
			color: green;
		}

		.custom-inactive-icon {
			color: grey;
		}

		.c2 {
			position: absolute;
			right: 0;

			image {
				width: 157px;
				height: 137px;
				z-index: 3;
			}
			.text-on-image{
				height: 80px;
				width: 80px;
				position: absolute; top: 50%; 
				left: 50%; 
				transform: translate(-50%, -50%);
				background-color: rgb(47, 76, 93);
				border-radius: 50%;
				text-align: center;
				line-height: 80px;
				color: aliceblue;
			}
		}
	}
</style>